@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html, body {
    height: 100%;
    font-family: 'Poppins',sans-serif;
    background: #f6f7fb
}

:root {
    --band-h: 260px; /* altura de la franja */
    --road-h: 86px; /* altura de la carretera dentro de la franja */
    --lane-offset: 18px; /* separación vertical entre carriles */
    --truck-size: 22px; /* tamaño de los camiones */
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px 0;
}

/* Logo encima de la franja */
.logo {
    display: flex;
    justify-content: center
}

    .logo img {
        height: 40px;
        width: auto;
    /*    display: block;
        background: rgba(255,255,255,.9);
        padding: 6px 12px;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(0,0,0,.08)*/
    }

/* ===== Franja horizontal ===== */
.band {
    position: relative;
    width: 100vw;
    height: var(--band-h);
    overflow: hidden;
    display: block;
}

/* Carretera horizontal (CSS puro) */
.h-road {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--road-h);
    transform: translateY(-50%);
    background: #56595e;
    box-shadow: 0 -4px 0 #fff, 0 4px 0 #fff; /* hombros blancos */
}
    /* línea discontinua central */
    .h-road::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 6px;
        transform: translateY(-50%);
        background: repeating-linear-gradient(90deg,#fff 0 24px,transparent 24px 48px);
        animation: lineSlide 1.6s linear infinite;
    }

@keyframes lineSlide {
    from {
        background-position: 0 0
    }

    to {
        background-position: 48px 0
    }
}

/* ===== Camiones horizontales ===== */
.truck-h {
    position: absolute;
    top: 50%;
    font-size: var(--truck-size);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
}

    .truck-h svg {
        width: 1em;
        height: 1.6em;
        display: block
    }

/* Carril superior: va hacia la derecha */
.rightward {
    left: -64px;
    transform: translateY(calc(-50% - var(--lane-offset))) rotate(90deg);
    animation: goRight 10s linear infinite;
}
/* Carril inferior: va hacia la izquierda */
.leftward {
    right: -64px;
    transform: translateY(calc(-50% + var(--lane-offset))) rotate(-90deg);
    animation: goLeft 11s linear infinite;
}

@keyframes goRight {
    to {
        left: calc(100% + 64px)
    }
}

@keyframes goLeft {
    to {
        right: calc(100% + 64px)
    }
}

.d2 {
    animation-delay: 2s
}

.d3 {
    animation-delay: 4s
}

.d4 {
    animation-delay: 6s
}

/* Accesibilidad */
@media (prefers-reduced-motion:reduce) {
    .rightward, .leftward, .h-road::after {
        animation: none
    }
}

/* Responsive */
@media (max-width:480px) {
    :root {
        --band-h: 220px;
        --road-h: 76px;
        --truck-size: 20px
    }

    .logo img {
        height: 34px
    }
}